<%@page import="com.dilean.impl.dao.AbstractDAOImpl"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueDate"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueList"%>
<%@page import="com.dilean.impl.model.attrval.AttrValueText"%>
<%@page import="java.util.Collection"%>
<%@page import="com.dilean.spring.AplicationContextHolder"%>
<%@page import="com.dilean.api.dao.PersonDAO"%>
<%@page import="com.dilean.impl.model.PersonImpl"%>
<%@page import="com.dilean.api.model.Person"%>
<%@page import="com.dilean.api.dao.ConversationDAO"%>
<%@page import="com.dilean.api.model.Conversation"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example of Twitter Bootstrap 3 Tabs Events</title>
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <link href="resources/mytheme/css/bootstrap.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link href="resources/mytheme/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom CSS -->
        <link href="resources/mytheme/css/simple-sidebar.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.css" rel="stylesheet">
        <link href="resources/mytheme/css/font-awesome.min.css" rel="stylesheet">
        <script type="text/javascript">
            $(document).ready(function() {
                $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
                    var activeTab = $(e.target).text(); // Get the name of active tab
                    var previousTab = $(e.relatedTarget).text(); // Get the name of previous tab
                    $(".active-tab span").html(activeTab);
                    $(".previous-tab span").html(previousTab);
                });
            });

            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });

            (function() {
                'use strict';
                var $ = jQuery;
                $.fn.extend({
                    filterTable: function() {
                        return this.each(function() {
                            $(this).on('keyup', function(e) {
                                $('.filterTable_no_results').remove();
                                var $this = $(this), search = $this.val().toLowerCase(), target = $this.attr('data-filters'), $target = $(target), $rows = $target.find('tbody tr');
                                if (search == '') {
                                    $rows.show();
                                } else {
                                    $rows.each(function() {
                                        var $this = $(this);
                                        $this.text().toLowerCase().indexOf(search) === -1 ? $this.hide() : $this.show();
                                    })
                                    if ($target.find('tbody tr:visible').size() === 0) {
                                        var col_count = $target.find('tr').first().find('td').size();
                                        var no_results = $('<tr class="filterTable_no_results"><td colspan="' + col_count + '">No results found</td></tr>')
                                        $target.find('tbody').append(no_results);
                                    }
                                }
                            });
                        });
                    }
                });
                $('[data-action="filter"]').filterTable();
            })(jQuery);

            $(function() {
                // attach table filter plugin to inputs
                $('[data-action="filter"]').filterTable();
                $('.container').on('click', '.panel-heading span.filter', function(e) {
                    var $this = $(this),
                            $panel = $this.parents('.panel');
                    $panel.find('.panel-body').slideToggle();
                    if ($this.css('display') != 'none') {
                        $panel.find('.panel-body input').focus();
                    }
                });
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>
        <style type="text/css">
            .bs-example{
                margin: 20px;
            }
            .user-row {
                margin-bottom: 14px;
            }
            .user-row:last-child {
                margin-bottom: 0;
            }
            .dropdown-user {
                margin: 13px 0;
                padding: 5px;
                height: 100%;
            }
            .dropdown-user:hover {
                cursor: pointer;
            }
            .table-user-information > tbody > tr {
                border-top: 1px solid rgb(221, 221, 221);
            }
            .table-user-information > tbody > tr:first-child {
                border-top: 0;
            }
            .table-user-information > tbody > tr > td {
                border-top: 0;
            }
            .row{
                margin-top:40px;
                padding: 0 10px;
            }
            .clickable{
                cursor: pointer;   
            }
            .panel-heading div {
                margin-top: -18px;
                font-size: 15px;
            }
            .panel-heading div span{
                margin-left:5px;
            }
            .panel-body{
                display: none;
            }
            .user-row {
                margin-bottom: 14px;
            }
            .user-row:last-child {
                margin-bottom: 0;
            }
            .dropdown-user {
                margin: 13px 0;
                padding: 5px;
                height: 100%;
            }
            .dropdown-user:hover {
                cursor: pointer;
            }
        </style>
    </head> 
    <body>
        <%
            Person me = new PersonImpl();
            final int myId = Integer.parseInt(request.getParameter("id"));
            me = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(myId);
            Collection<Person> allUsers = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findAll();
            AttrValueText firstNameUser;
            AttrValueText lastNameUser;
            AttrValueList genderUser;
            AttrValueList univercityUser;
            AttrValueDate regDateUser;
            Collection<Person> friendRequests = me.getFriendRequests();
            Collection<Person> myFriends = me.getFriends();
            AttrValueText firstNameReq;
            AttrValueText lastNameReq;
            AttrValueList genderReq;
            AttrValueList univercityReq;
            AttrValueDate regDateReq;
            int numberRequest = 0;
            for (Person fr : friendRequests) {
                if (myFriends.contains(fr) == false) {
                    numberRequest++;
                }
            }
        %>
        <div id="wrapper">
            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <ul class="sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="http://localhost:8080/Dilean/myPage.jsp">
                            <h2 align="centre" >Dilean</h2>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/myPage.jsp"><i class="fa fa-home fa-fw-5x"></i>&nbsp; My Page</a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/Dilean/friends.jsp?id=1"><i class="fa fa-users"></i>&nbsp; Friends </a>
                    </li>
                    
                    <li>
                        <a href="http://localhost:8080/Dilean/allUsers.jsp?id=1"><i class="fa fa-database"></i>&nbsp; Users 
                            <% 
                            if(numberRequest!=0){
                                %>
                                <span class="badge badge-info"><%=numberRequest %> </span>
                                <%
                                }
                            %>
                        </a>
                    </li>
                    
                    
                    
                    <li>
                        <a href="http://localhost:8080/Dilean/conversation.jsp"><i class="fa fa-envelope"></i>&nbsp; Messages </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="http://localhost:8080/Dilean/editUser.jsp?id=1"><i class="fa fa-cog"></i>&nbsp; Settings</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-book"></i>&nbsp; About</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sign-out"></i>&nbsp; LogOut</a>
                    </li>

                </ul>
            </div>
            <div id="page-content-wrapper">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <a class="btn btn-large btn-primary" href="#menu-toggle" id="menu-toggle" >
                                <i class="fa fa-user fa-3x"></i> <h4>User Menu</h4></a>
                            <br>
                            <br>
                            <br>
                            <div class="bs-example">
                                <ul class="nav nav-tabs" id="myTab">

                                    <li class="dropdown">
                                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-users"></i> Friends and Friend Requests <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li><a data-toggle="tab" href="#dropdown1"><i class="fa fa-users"></i> All Dilean Users</a></li>
                                            <li><a data-toggle="tab" href="#dropdown2"><i class="fa fa-pencil-square-o"></i> My Friend Request</a></li>
                                            <li><a data-toggle="tab" href="#dropdown3"><i class="fa fa-database"></i> My Friends</a></li>
                                            <li><a data-toggle="tab" href="#dropdown4"><i class="fa fa-bars"></i> My Interesting Pages</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div id="dropdown1" class="tab-pane fade">
                                        <div class="container">
                                            <h1>All Dilean Users</h1>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="panel panel-primary">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">Users</h3>
                                                            <div class="pull-right">
                                                                <span class="clickable filter" data-toggle="tooltip" title="Toggle table filter" data-container="body">
                                                                    <i class="fa fa-search"> Filter</i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="panel-body">
                                                            <input type="text" class="form-control" id="dev-table-filter" data-action="filter" data-filters="#dev-table" placeholder="Filter Users" />
                                                        </div>
                                                        <table class="table table-hover" id="dev-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Full Name</th>
                                                                    <th>Gender</th>
                                                                    <th>Univercity</th>
                                                                    <th>Registration Date</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <%       int num = 1;
                                                                    for (Person users : allUsers) {
                                                                        int idUser = users.getId();
                                                                        firstNameUser = users.getAttributeValue(1, AttrValueText.class);
                                                                        lastNameUser = users.getAttributeValue(2, AttrValueText.class);
                                                                        genderUser = users.getAttributeValue(6, AttrValueList.class);
                                                                        univercityUser = users.getAttributeValue(9, AttrValueList.class);
                                                                        regDateUser = users.getAttributeValue(11, AttrValueDate.class);
                                                                        Person user = new PersonImpl();
                                                                        user = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(idUser);
                                                                        Collection<Person> userFriends = user.getFriends();
                                                                        String fullname = "User #" + idUser;
                                                                        if ((firstNameUser != null) && (lastNameUser != null)) {
                                                                            fullname = firstNameUser.getValue() + " " + lastNameUser.getValue();
                                                                        } else if ((firstNameUser == null) && (lastNameUser != null)) {
                                                                            fullname = lastNameUser.getValue();
                                                                        } else if ((firstNameUser != null) && (lastNameUser == null)) {
                                                                            fullname = firstNameUser.getValue();
                                                                        }
                                                                        if (idUser == myId) {
                                                                %>
                                                                <tr class="info">
                                                                    <td><%=num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/myPage.jsp"><%=fullname%></a></td>
                                                                    <td><%= genderUser.getValue().getName()%></td>
                                                                    <td><%= univercityUser.getValue().getName()%></td>
                                                                    <td><%=regDateUser.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/myPage.jsp" class="btn btn-success"><i class="fa fa-home"></i>&nbsp; Me    </a></td>
                                                                </tr>
                                                                <%
                                                                } else if (userFriends.contains(me) && myFriends.contains(user)) {
                                                                %>
                                                                <tr class="success">
                                                                    <td><%=num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=idUser%>"><%=fullname%></a></td>

                                                                    <td><%= genderUser.getValue().getName()%></td>
                                                                    <td><%= univercityUser.getValue().getName()%></td>
                                                                    <td><%=regDateUser.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=4&frid=<%=idUser%>" class="btn btn-danger"><i class="fa fa-trash-o"></i>&nbsp; Delite</a></td>
                                                                </tr>
                                                                <%
                                                                } else if (myFriends.contains(user)) {
                                                                %>
                                                                <tr class="warning">
                                                                    <td><%=num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=idUser%>"><%=fullname%></a></td>
                                                                    <td><%= genderUser.getValue().getName()%></td>
                                                                    <td><%= univercityUser.getValue().getName()%></td>
                                                                    <td><%=regDateUser.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=idUser%>" class="btn btn-info"><i class="fa fa-user"></i>&nbsp; My Interesting Page    </a></td>
                                                                </tr>
                                                                <%
                                                                } else if (friendRequests.contains(user)) {
                                                                %>
                                                                <tr class="warning">
                                                                    <td><%=num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=idUser%>"><%=fullname%></a></td>
                                                                    <td><%= genderUser.getValue().getName()%></td>
                                                                    <td><%= univercityUser.getValue().getName()%></td>
                                                                    <td><%=regDateUser.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=2&frid=<%=idUser%>" class="btn btn-success"><i class="fa fa-plus"></i>&nbsp; Add    </a></td>
                                                                </tr>
                                                                <%
                                                                } else {
                                                                %>
                                                                <tr>
                                                                    <td><%=num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%=idUser%>"><%=fullname%></a></td>
                                                                    <td><%= genderUser.getValue().getName()%></td>
                                                                    <td><%= univercityUser.getValue().getName()%></td>
                                                                    <td><%=regDateUser.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=3&frid=<%=idUser%>" class="btn btn-success"><i class="fa fa-plus"></i>&nbsp; Add    </a></td>
                                                                </tr>
                                                                <%
                                                                        }
                                                                        firstNameUser = null;
                                                                        lastNameUser = null;
                                                                        genderUser = null;
                                                                        univercityUser = null;
                                                                        regDateUser = null;
                                                                        num++;
                                                                    }
                                                                %>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <hr>
                                    </div>
                                    <div id="dropdown2" class="tab-pane fade">
                                        <div class="container">
                                            <h1>My Friend Requests</h1>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="panel panel-primary">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">Users</h3>
                                                            <div class="pull-right">
                                                            </div>
                                                        </div>
                                                        <table class="table table-hover" id="dev-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Full Name</th>
                                                                    <th>Gender</th>
                                                                    <th>Univercity</th>
                                                                    <th>Registration Date</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <%
                                                                    num = 1;
                                                                    for (Person userReq : friendRequests) {
                                                                        int idReq = userReq.getId();
                                                                        firstNameReq = userReq.getAttributeValue(1, AttrValueText.class);
                                                                        lastNameReq = userReq.getAttributeValue(2, AttrValueText.class);
                                                                        genderReq = userReq.getAttributeValue(6, AttrValueList.class);
                                                                        univercityReq = userReq.getAttributeValue(9, AttrValueList.class);
                                                                        regDateReq = userReq.getAttributeValue(11, AttrValueDate.class);
                                                                        String fullname = "User #" + idReq;
                                                                        if ((firstNameReq != null) && (lastNameReq != null)) {
                                                                            fullname = firstNameReq.getValue() + " " + lastNameReq.getValue();
                                                                        } else if ((firstNameReq == null) && (lastNameReq != null)) {
                                                                            fullname = lastNameReq.getValue();
                                                                        } else if ((firstNameReq != null) && (lastNameReq == null)) {
                                                                            fullname = firstNameReq.getValue();
                                                                        }
                                                                        if (myFriends.contains(userReq) == false) {
                                                                %>
                                                                <tr class="warning">
                                                                    <td><%= num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= idReq%>"><%= fullname%></a></td>
                                                                    <td><%= genderReq.getValue().getName()%></td>
                                                                    <td><%= univercityReq.getValue().getName()%></td>
                                                                    <td><%=regDateReq.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=2&frid=<%=idReq%>" class="btn btn-success"><i class="fa fa-plus"></i>&nbsp; Add </a></td>
                                                                </tr>
                                                                <%
                                                                            num++;
                                                                        }
                                                                    }
                                                                %>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="dropdown3" class="tab-pane fade">
                                        <div class="container">
                                            <h1>My Friends</h1>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="panel panel-primary">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">Users</h3>
                                                            <div class="pull-right">
                                                            </div>
                                                        </div>
                                                        <table class="table table-hover" id="dev-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Full Name</th>
                                                                    <th>Gender</th>
                                                                    <th>Univercity</th>
                                                                    <th>Registration Date</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <%
                                                                    num = 1;
                                                                    for (Person userReq : friendRequests) {
                                                                        int idReq = userReq.getId();
                                                                        firstNameReq = userReq.getAttributeValue(1, AttrValueText.class);
                                                                        lastNameReq = userReq.getAttributeValue(2, AttrValueText.class);
                                                                        genderReq = userReq.getAttributeValue(6, AttrValueList.class);
                                                                        univercityReq = userReq.getAttributeValue(9, AttrValueList.class);
                                                                        regDateReq = userReq.getAttributeValue(11, AttrValueDate.class);
                                                                        String fullname = "User #" + idReq;
                                                                        Person user = new PersonImpl();
                                                                        user = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(idReq);
                                                                        Collection<Person> userFriends = user.getFriends();
                                                                        if ((firstNameReq != null) && (lastNameReq != null)) {
                                                                            fullname = firstNameReq.getValue() + " " + lastNameReq.getValue();
                                                                        } else if ((firstNameReq == null) && (lastNameReq != null)) {
                                                                            fullname = lastNameReq.getValue();
                                                                        } else if ((firstNameReq != null) && (lastNameReq == null)) {
                                                                            fullname = firstNameReq.getValue();
                                                                        }
                                                                        if (myFriends.contains(userReq) && (userFriends).contains(me)) {
                                                                %>
                                                                <tr class="success">
                                                                    <td><%= num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= idReq%>"><%= fullname%></a></td>
                                                                    <td><%= genderReq.getValue().getName()%></td>
                                                                    <td><%= univercityReq.getValue().getName()%></td>
                                                                    <td><%=regDateReq.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friendsRequestAction.jsp?id=<%=myId%>&par=4&frid=<%=idReq%>" class="btn btn-danger"><i class="fa fa-trash-o"></i>&nbsp; Delite</a></td>
                                                                </tr>
                                                                <%
                                                                            num++;
                                                                        }
                                                                    }
                                                                %>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>          
                                    <div id="dropdown4" class="tab-pane fade">
                                        <div class="container">
                                            <h1>My Interesting Pages</h1>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="panel panel-primary">
                                                        <div class="panel-heading">
                                                            <h3 class="panel-title">Users</h3>
                                                            <div class="pull-right">
                                                            </div>
                                                        </div>
                                                        <table class="table table-hover" id="dev-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>Full Name</th>
                                                                    <th>Gender</th>
                                                                    <th>Univercity</th>
                                                                    <th>Registration Date</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <%
                                                                    num = 1;
                                                                    for (Person userReq : myFriends) {
                                                                        int idReq = userReq.getId();
                                                                        firstNameReq = userReq.getAttributeValue(1, AttrValueText.class);
                                                                        lastNameReq = userReq.getAttributeValue(2, AttrValueText.class);
                                                                        genderReq = userReq.getAttributeValue(6, AttrValueList.class);
                                                                        univercityReq = userReq.getAttributeValue(9, AttrValueList.class);
                                                                        regDateReq = userReq.getAttributeValue(11, AttrValueDate.class);
                                                                        String fullname = "User #" + idReq;
                                                                        Person user = new PersonImpl();
                                                                        user = AplicationContextHolder.getInstance().getContext().getBean(PersonDAO.class).findByIdWithFriends(idReq);
                                                                        Collection<Person> userFriends = user.getFriends();
                                                                        if ((firstNameReq != null) && (lastNameReq != null)) {
                                                                            fullname = firstNameReq.getValue() + " " + lastNameReq.getValue();
                                                                        } else if ((firstNameReq == null) && (lastNameReq != null)) {
                                                                            fullname = lastNameReq.getValue();
                                                                        } else if ((firstNameReq != null) && (lastNameReq == null)) {
                                                                            fullname = firstNameReq.getValue();
                                                                        }
                                                                        if (userFriends.contains(me) == false) {
                                                                %>
                                                                <tr class="warning">
                                                                    <td><%= num%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= idReq%>"><%= fullname%></a></td>
                                                                    <td><%= genderReq.getValue().getName()%></td>
                                                                    <td><%= univercityReq.getValue().getName()%></td>
                                                                    <td><%=regDateReq.getDataStr()%></td>
                                                                    <td><a href="http://localhost:8080/Dilean/friend.jsp?id=<%= idReq%>" class="btn btn-info"><i class="fa fa-user"></i>&nbsp; My Interesting Page    </a></td>
                                                                    <%
                                                                                num++;
                                                                            }
                                                                        }
                                                                    %>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /#wrapper -->
                            <script>
                                $("#menu-toggle").click(function(e) {
                                    e.preventDefault();
                                    $("#wrapper").toggleClass("toggled");
                                });

                                $(document).ready(function() {
                                    var panels = $('.user-infos');
                                    var panelsButton = $('.dropdown-user');
                                    panels.hide();

                                    //Click dropdown
                                    panelsButton.click(function() {
                                        //get data-for attribute
                                        var dataFor = $(this).attr('data-for');
                                        var idFor = $(dataFor);

                                        //current button
                                        var currentButton = $(this);
                                        idFor.slideToggle(400, function() {
                                            //Completed slidetoggle
                                            if (idFor.is(':visible'))
                                            {
                                                currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
                                            }
                                            else
                                            {
                                                currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
                                            }
                                        })
                                    });


                                    $('[data-toggle="tooltip"]').tooltip();

                                    $('button').click(function(e) {
                                        e.preventDefault();
                                        alert("This is a demo.\n :-)");
                                    });
                                });
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>




